<template>
  <div class="container">
    <header>
      <h1>Vue2 左右选择面板</h1>
      <p class="subtitle">支持数据项的左右移动、全选、搜索和排序功能</p>
    </header>

    <div class="transfer-panel">
      <!-- 左侧面板 -->
      <div class="panel left-panel">
        <div class="panel-header">
          <div class="panel-title">
            <span>可选项目 ({{ leftItems.length }})</span>
          </div>
          <div class="panel-actions">
            <input
              v-model="leftSearch"
              placeholder="搜索..."
              class="search-input"
              @input="filterLeftItems"
            >
            <button class="action-btn" @click="sortLeftItems('asc')">
              <i class="fas fa-sort-amount-up"></i>
            </button>
            <button class="action-btn" @click="sortLeftItems('desc')">
              <i class="fas fa-sort-amount-down"></i>
            </button>
          </div>
        </div>
        
        <div class="panel-content">
          <div class="select-all">
            <label class="checkbox-label">
              <input
                type="checkbox"
                :checked="isAllLeftSelected"
                @change="toggleSelectAll('left')"
              >
              <span>全选</span>
            </label>
          </div>
          
          <div class="items-list">
            <div
              v-for="item in filteredLeftItems"
              :key="item.id"
              class="item"
              :class="{ selected: isLeftSelected(item.id) }"
              @click="toggleSelectItem(item.id, 'left')"
            >
              <label class="checkbox-label" @click="toggleSelectItem(item.id, 'left')">
                <input
                  type="checkbox"
                  :checked="isLeftSelected(item.id)"
                  @click.stop
                   @change="toggleSelectItem(item.id, 'left')"
                >
                <span class="item-content">
                  <span class="item-name">{{ item.name }}</span>
                  <span class="item-desc">{{ item.description }}</span>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间操作按钮 -->
      <div class="transfer-actions">
        <button
          class="transfer-btn"
          :disabled="selectedLeftItems.length === 0"
          @click="moveToRight"
          title="移动到右侧"
        >
          <i class="fas fa-arrow-right"></i>
        </button>
        <button
          class="transfer-btn"
          :disabled="selectedRightItems.length === 0"
          @click="moveToLeft"
          title="移动到左侧"
        >
          <i class="fas fa-arrow-left"></i>
        </button>
        <button
          class="transfer-btn"
          :disabled="leftItems.length === 0"
          @click="moveAllToRight"
          title="全部移动到右侧"
        >
          <i class="fas fa-forward"></i>
        </button>
        <button
          class="transfer-btn"
          :disabled="rightItems.length === 0"
          @click="moveAllToLeft"
          title="全部移动到左侧"
        >
          <i class="fas fa-backward"></i>
        </button>
      </div>

      <!-- 右侧面板 -->
      <div class="panel right-panel">
        <div class="panel-header">
          <div class="panel-title">
            <span>已选项目 ({{ rightItems.length }})</span>
          </div>
          <div class="panel-actions">
            <input
              v-model="rightSearch"
              placeholder="搜索..."
              class="search-input"
              @input="filterRightItems"
            >
            <button class="action-btn" @click="sortRightItems('asc')">
              <i class="fas fa-sort-amount-up"></i>
            </button>
            <button class="action-btn" @click="sortRightItems('desc')">
              <i class="fas fa-sort-amount-down"></i>
            </button>
          </div>
        </div>
        
        <div class="panel-content">
          <div class="select-all">
            <label class="checkbox-label">
              <input
                type="checkbox"
                :checked="isAllRightSelected"
                @change="toggleSelectAll('right')"
              >
              <span>全选</span>
            </label>
          </div>
          
          <div class="items-list">
            <div
              v-for="item in filteredRightItems"
              :key="item.id"
              class="item"
              :class="{ selected: isRightSelected(item.id) }"
              @click="toggleSelectItem(item.id, 'right')"
            >
              <label class="checkbox-label" @click="toggleSelectItem(item.id, 'right')">
                <input
                  type="checkbox"
                  :checked="isRightSelected(item.id)"
                  @click.stop
                  @change="toggleSelectItem(item.id, 'right')"
                >
                <span class="item-content">
                  <span class="item-name">{{ item.name }}</span>
                  <span class="item-desc">{{ item.description }}</span>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部操作 -->
    <div class="bottom-actions">
      <button class="primary-btn" @click="confirmSelection">
        <i class="fas fa-check"></i>
        确认选择
      </button>
      <button class="secondary-btn" @click="resetAll">
        <i class="fas fa-redo"></i>
        重置
      </button>
    </div>

    <!-- 结果展示 -->
    <div v-if="confirmedItems.length > 0" class="result-panel">
      <h3>已确认的项目 ({{ confirmedItems.length }})</h3>
      <div class="selected-items">
        <span
          v-for="item in confirmedItems"
          :key="item.id"
          class="selected-tag"
        >
          {{ item.name }}
          <i class="fas fa-times" @click="removeConfirmedItem(item.id)"></i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TransferPanel',
  
  data() {
    return {
      // 原始数据
      allItems: [
        { id: 1, name: '用户管理', description: '管理用户信息和权限' },
        { id: 2, name: '订单管理', description: '处理订单和支付' },
        { id: 3, name: '商品管理', description: '管理商品信息和库存' },
        { id: 4, name: '数据分析', description: '查看统计和分析报告' },
        { id: 5, name: '系统设置', description: '配置系统参数' },
        { id: 6, name: '日志查看', description: '查看操作日志' },
        { id: 7, name: '消息通知', description: '管理系统消息' },
        { id: 8, name: '文件管理', description: '上传下载文件' },
        { id: 9, name: '权限管理', description: '设置用户权限' },
        { id: 10, name: '报表导出', description: '导出各种报表' }
      ],
      
      // 左右面板数据
      leftItems: [],
      rightItems: [],
      
      // 选中项
      selectedLeftItems: [],
      selectedRightItems: [],
      
      // 搜索关键词
      leftSearch: '',
      rightSearch: '',
      
      // 过滤后的项
      filteredLeftItems: [],
      filteredRightItems: [],
      
      // 确认的项目
      confirmedItems: []
    };
  },
  
  computed: {
    // 左侧是否全选
    isAllLeftSelected() {
      return this.filteredLeftItems.length > 0 && 
             this.selectedLeftItems.length === this.filteredLeftItems.length;
    },
    
    // 右侧是否全选
    isAllRightSelected() {
      return this.filteredRightItems.length > 0 && 
             this.selectedRightItems.length === this.filteredRightItems.length;
    }
  },
  
  mounted() {
    this.initData();
  },
  
  methods: {
    // 初始化数据
    initData() {
      this.leftItems = [...this.allItems];
      this.rightItems = [];
      this.selectedLeftItems = [];
      this.selectedRightItems = [];
      this.leftSearch = '';
      this.rightSearch = '';
      this.filteredLeftItems = [...this.leftItems];
      this.filteredRightItems = [...this.rightItems];
      this.confirmedItems = [];
    },
    
    // 过滤左侧项
    filterLeftItems() {
      if (!this.leftSearch) {
        this.filteredLeftItems = [...this.leftItems];
      } else {
        const searchLower = this.leftSearch.toLowerCase();
        this.filteredLeftItems = this.leftItems.filter(item =>
          item.name.toLowerCase().includes(searchLower) ||
          item.description.toLowerCase().includes(searchLower)
        );
      }
    },
    
    // 过滤右侧项
    filterRightItems() {
      if (!this.rightSearch) {
        this.filteredRightItems = [...this.rightItems];
      } else {
        const searchLower = this.rightSearch.toLowerCase();
        this.filteredRightItems = this.rightItems.filter(item =>
          item.name.toLowerCase().includes(searchLower) ||
          item.description.toLowerCase().includes(searchLower)
        );
      }
    },
    
    // 排序左侧项
    sortLeftItems(order) {
      this.filteredLeftItems.sort((a, b) => {
        return order === 'asc' 
          ? a.name.localeCompare(b.name)
          : b.name.localeCompare(a.name);
      });
    },
    
    // 排序右侧项
    sortRightItems(order) {
      this.filteredRightItems.sort((a, b) => {
        return order === 'asc' 
          ? a.name.localeCompare(b.name)
          : b.name.localeCompare(a.name);
      });
    },
    
    // 检查左侧项是否选中
    isLeftSelected(id) {
      return this.selectedLeftItems.includes(id);
    },
    
    // 检查右侧项是否选中
    isRightSelected(id) {
      return this.selectedRightItems.includes(id);
    },
    toggleSelectLeft(e, id) {
      // e.stopPropagation();
      const selectedArray = this.selectedLeftItems;
      const index = selectedArray.indexOf(id);
      
      if (index === -1) {
        selectedArray.push(id);
      } else {
        selectedArray.splice(index, 1);
      }
      console.log(selectedArray, this.selectedLeftItems)
    },
    // 切换选择项
    toggleSelectItem(id, side) {
      const selectedArray = side === 'left' ? this.selectedLeftItems : this.selectedRightItems;
      const index = selectedArray.indexOf(id);
      
      if (index === -1) {
        selectedArray.push(id);
      } else {
        selectedArray.splice(index, 1);
      }
      console.log(selectedArray, this.selectedLeftItems)
    },
    
    // 切换全选
    toggleSelectAll(side) {
      const items = side === 'left' ? this.filteredLeftItems : this.filteredRightItems;
      const selectedArray = side === 'left' ? this.selectedLeftItems : this.selectedRightItems;
      
      if (selectedArray.length === items.length) {
        // 如果已经全选，则取消全选
        selectedArray.splice(0, selectedArray.length);
      } else {
        // 否则全选
        selectedArray.splice(0, selectedArray.length);
        items.forEach(item => selectedArray.push(item.id));
      }
    },
    
    // 移动到右侧
    moveToRight() {
      const itemsToMove = this.leftItems.filter(item =>
        this.selectedLeftItems.includes(item.id)
      );
      
      this.rightItems = [...this.rightItems, ...itemsToMove];
      this.leftItems = this.leftItems.filter(item =>
        !this.selectedLeftItems.includes(item.id)
      );
      
      this.selectedLeftItems = [];
      this.filterLeftItems();
      this.filterRightItems();
    },
    
    // 移动到左侧
    moveToLeft() {
      const itemsToMove = this.rightItems.filter(item =>
        this.selectedRightItems.includes(item.id)
      );
      
      this.leftItems = [...this.leftItems, ...itemsToMove];
      this.rightItems = this.rightItems.filter(item =>
        !this.selectedRightItems.includes(item.id)
      );
      
      this.selectedRightItems = [];
      this.filterLeftItems();
      this.filterRightItems();
    },
    
    // 全部移动到右侧
    moveAllToRight() {
      this.rightItems = [...this.rightItems, ...this.leftItems];
      this.leftItems = [];
      this.selectedLeftItems = [];
      this.filterLeftItems();
      this.filterRightItems();
    },
    
    // 全部移动到左侧
    moveAllToLeft() {
      this.leftItems = [...this.leftItems, ...this.rightItems];
      this.rightItems = [];
      this.selectedRightItems = [];
      this.filterLeftItems();
      this.filterRightItems();
    },
    
    // 确认选择
    confirmSelection() {
      this.confirmedItems = [...this.rightItems];
      this.$message.success(`已选择 ${this.rightItems.length} 个项目`);
    },
    
    // 移除已确认的项目
    removeConfirmedItem(id) {
      this.confirmedItems = this.confirmedItems.filter(item => item.id !== id);
    },
    
    // 重置所有
    resetAll() {
      this.initData();
      this.$message.info('已重置所有选择');
    }
  }
};
</script>

<style scoped>
@import "~@fortawesome/fontawesome-free/css/all.min.css";

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header {
  text-align: center;
  margin-bottom: 30px;
}

h1 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.subtitle {
  color: #7f8c8d;
  font-size: 16px;
}

.transfer-panel {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  min-height: 500px;
}

.panel {
  flex: 1;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  background: white;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 15px;
  border-bottom: 1px solid #e1e5e9;
  background: #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-title {
  font-weight: 600;
  color: #2c3e50;
}

.panel-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-input {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  width: 120px;
}

.action-btn {
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  color: #6c757d;
}

.action-btn:hover {
  background: #f8f9fa;
}

.panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.select-all {
  padding: 12px 15px;
  border-bottom: 1px solid #e1e5e9;
  background: #fafbfc;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
}

.checkbox-label input[type="checkbox"] {
  margin: 0;
}

.items-list {
  flex: 1;
  overflow-y: auto;
  padding: 5px;
}

.item {
  padding: 12px 15px;
  border-radius: 4px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.item:hover {
  background: #f8f9fa;
  border-color: #e9ecef;
}

.item.selected {
  background: #e3f2fd;
  border-color: #2196f3;
}

.item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.item-name {
  font-weight: 500;
  color: #2c3e50;
}

.item-desc {
  font-size: 12px;
  color: #6c757d;
}

.transfer-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 0 10px;
}

.transfer-btn {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  color: #6c757d;
  transition: all 0.2s;
}

.transfer-btn:hover:not(:disabled) {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.transfer-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bottom-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
}

.primary-btn {
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.primary-btn:hover {
  background: #0056b3;
}

.secondary-btn {
  padding: 12px 24px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.secondary-btn:hover {
  background: #545b62;
}

.result-panel {
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  padding: 20px;
}

.result-panel h3 {
  margin-bottom: 15px;
  color: #2c3e50;
}

.selected-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selected-tag {
  padding: 6px 12px;
  background: #e3f2fd;
  border: 1px solid #bbdefb;
  border-radius: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.selected-tag i {
  cursor: pointer;
  color: #f44336;
  font-size: 12px;
}

.selected-tag i:hover {
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .transfer-panel {
    flex-direction: column;
  }
  
  .transfer-actions {
    flex-direction: row;
    justify-content: center;
    padding: 15px 0;
  }
  
  .panel-actions {
    flex-wrap: wrap;
  }
  
  .search-input {
    width: 100px;
  }
}

/* 滚动条样式 */
.items-list::-webkit-scrollbar {
  width: 6px;
}

.items-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.items-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.items-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>